<template>
  <div class="content1">
    <h1 class="title">{{ info1.title }}</h1>
    <div class="info1">
      <!-- <span class="tag">{{ info1.source }}</span> -->
      <img src="../assets/images/send_time_icon.png" alt="">
      <span class="time">{{ info1.createTime }}</span>
      <div class="view-count">
        <img src="../assets/images/view_num_icon.png" alt="">
        <span class="num">{{ info1.viewCount }}</span>
      </div>
    </div>
    <div class="text" v-html="info1.content"></div>
  </div>
</template>

<script>
import { getNewsDetail } from "@/api/api";
export default {
  data() {
    return {
      info1: {},
    };
  },
  computed: {
    queryParams() {
      // 假设这里的参数是从URL中获取的
      return this.$route.query || {};
    },
  },
  mounted() {
    this.getArticleDetails(this.queryParams.id);
  },
  methods: {
    async getArticleDetails(id) {
      let response = await getNewsDetail(id);
      let articleInfo = response.data.data;

      // 处理图片链接
      let regexPattern = /img src="\/prod-api/g;
      let replacementString = 'img src="http://zhinong.lecyon.com/prod-api';
      let outputString = articleInfo.content.replace(
        regexPattern,
        replacementString
      );

      this.info1 = {
        ...articleInfo,
        content: outputString,
      };
    },
  },
};
</script>

<style lang="scss">
.content1 {
  padding: 20px;
}

.title {
  margin-bottom: 20px;
  font-size: 36px;
  font-weight: bold;
  color: #333333;
}

.info1 {
  display: flex;
  font-size: 24px;
  align-items: center;
  margin-bottom: 20px;
  img{
    width: 26px;
    height: 26px;
  }
  .tag {
    padding: 0 6px;
    height: 20px;
    background: #ffbf50;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    margin-right: 15px;
  }

  .time {
    color: #a5a5a5;
    margin-right: 20px;
  }

  .view-count {
    display: inline-flex;
    align-items: center;
    color: #a5a5a5;

    .num {
      margin-left: 5px;
    }
  }
}

.text img {
  width: 100% !important;
}

.text {
  // font-weight: 400;
  // font-size: 28px;
  // color: #333333;
  // line-height: 48px;
  // text-align: left;
  p {
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    line-height: 48px;
    text-align: left;
    strong {
      font-size: 34px !important;
    }
  }
}
</style>
